<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.基本列表</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<ul>
				<li v-for="person in persons" :key="person.id">
					{{person.name}} -- {{person.age}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					persons:[
						{id:'oiui56d3ws5',name:'年轻尴尬的强哥',age:18},
						{id:'87asd8t8s72',name:'圆圆的海峰老师',age:28},
						{id:'9709i879yu7',name:'开法拉利的老刘',age:38},
					]
				}
			})
		</script>
	</body>
</html>